<template>
  <div>
    <el-select v-model="value" class="pms-select" :disabled="disabled" placeholder="请选择">
      <div class="tool-box">
        <div class="tool-box-item" :class="{'disable':!showAll}" @click="checkOptions(options)">
          <img :src="require('@/assets/image/check_all.png')">
          <span class="text">全选</span>
        </div>
        <div class="tool-box-item" @click="cleanAll">
          <img :src="require('@/assets/image/clean_all.png')">
          <span class="text">清空</span>
        </div>
        <div class="tool-box-item" :class="{'disable':!showInverse}" @click="syncUnChecked">
          <img :src="require('@/assets/image/inverse.png')">
          <span class="text">反选</span>
        </div>
      </div>
      <el-checkbox-group v-model="checkList" @change="checkboxClick">
        <el-option
          v-for="item in options"
          :key="item.dictId"
          :label="item.dictName"
          :value="item.dictId"
        >
          <div @click.stop>
            <el-checkbox class="pms-checkbox" :label="`${item.dictId}|${item.dictName}`" :disabled="item.disabled || false">{{ item.dictName }}</el-checkbox>
          </div>
        </el-option>
      </el-checkbox-group>

    </el-select>
  </div>
</template>

<script>
export default {
	name: 'CustomSelect',
  model: {
    prop: 'selected',
    event: 'change'
  },
  props: {
    selected: { // 组件对外暴露的value
      type: String,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    options: { // 下拉列表 元素对象为{dictId:'',dictName:''}
      type: Array,
      default: () => {
        return []
      }
    },
    showAll: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    showInverse: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 不想被选中的option的值，并且如果命中的话把命中的值回传
    disOptionsVal: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
	data() {
		return {
			value: '',
      checkList: [], // 每个元素是dictId与dictName拼接的list，checkbox-group的value
			dictList: this.options,
      select: null
		}
	},
  computed: {
  },
  watch: {
    selected: {
      immediate: true,
      handler(newVal, oldVal) {
        this.syncChecked(newVal)
      }
    },
    options: {
      handler(newVal, oldVal) {
        this.dictList = newVal
        this.syncChecked(this.selected)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 根据selected设置选择状态
    syncChecked(str) {
      if (!str) {
        this.value = str
        this.checkList = []
        this.select = null
        return
      }
      const arr = str.split(',')
      const temp = []
      if (this.dictList.length > 0) {
        arr.forEach(i => {
          temp.push(this.dictList.find(o => o.dictId === i))
        })
        this.checkOptions(temp)
      }
    },
    // 根据selected设置反选状态
    syncUnChecked() {
      if (!this.selected) { return }
      const arr = this.selected.split(',')
      let temp = []
      temp = this.dictList.filter((v) => !arr.some((val) => val === v.dictId))
      this.checkOptions(temp)
    },
    // 根据 checkbox-group设置选择状态
    checkboxClick(item) {
      const val_arr = []
      let name_arr = []
      const dis_arr = []
      this.checkList = item.filter(i => {
        const dictId = i.split('|')[0]
        if (this.disOptionsVal.includes(dictId)) {
          dis_arr.push(dictId)
          return false
        } else { return true }
      })
      this.checkList.forEach(i => {
        val_arr.push(i.split('|')[0])
        name_arr.push(i.split('|')[1])
      })
      if (!this.selected) {
        this.checkList = []
        name_arr = []
      }
      this.value = name_arr
      this.$emit('update:selected', val_arr.toString())
      this.$emit('change', val_arr.toString())
      if (dis_arr.length > 0) {
        this.$emit('dis-hit', dis_arr.toString())
      }
    },
    // 根据options设置value
    checkOptions(options = this.dictList) {
      const val_arr = []
      const name_arr = []
      options.forEach(i => {
        if (i && i.dictId){
          val_arr.push(i.dictId)
        }
        if (i && i.dictName){
          name_arr.push(i.dictName)
        }
      })
      this.value = name_arr.toString()
      this.checkList = options.length && options[0] !== undefined ? options.map(i => `${i.dictId}|${i.dictName}`) : []
      this.$emit('update:selected', val_arr.toString())
      this.$emit('change', val_arr.toString())
    },
    // 清空
    cleanAll() {
      this.checkList = []
      this.value = ''
      this.$emit('update:selected', '')
      this.$emit('change', '')
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-box {
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  line-height: 26px;
  &-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:nth-child(n+2) {
      margin-left: 10px;
    }
  }
}
.disable {
  opacity: 0.5;
  pointer-events: none;
}
.text {
  display: inline-block;
  margin-left: 2px;
  font-size: 12px;
  color: #606266;
}
:deep(.el-checkbox__label) {
  font-size: 12px;
}
:deep(.el-select-dropdown__item){
  padding: 0 10px;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: #f7f7f7;
}
.el-select-dropdown__item {
  padding: 0 10px;
}
</style>
